<template>
	<text>{{num}}</text>
</template>

<script>
	export default {
		props: {
			start: {
				type: Number,
				default: 0
			},
			stop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				num: this.start,
				timer: null
			};
		},
		computed: {
			speed() {
				const speed = +(Math.pow(Math.abs(this.stop - this.start), -1/2) * Math.pow(18, 2)).toFixed(0)
				if (speed < 8) return 8
				return speed
			}
		},
		watch: {
			stop() {
				this.begin(this.speed)
			}
		},
		mounted() {
			this.begin(this.speed)
		},
		methods: {
			begin(speed) {
				if (this.num >= this.stop) {
					this.num = this.stop
					clearTimeout(this.timer)
					return
				}
				// this.timer = setTimeout(() => {
				// 	if (this.stop > this.start) this.num++
				// 	else this.num--
				// 	this.begin(speed)
				// }, speed)
				this.timer = setTimeout(() => {
					if (this.stop > this.start) {
						this.num = Number(this.num)+1
					}else{
						this.num --
					}
					this.begin(speed)
				}, speed)
			}
		}

	}
</script>
